<template>
    <div class="vue-ms-main  vue-ms-main-add" v-loading="loading">
        <div class="ms-top">
            <!-- 当前页标题  -->
            <div class="crumbs fl">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-menu"></i><a @click="$router.push('/storevehicleList')">  项目管理</a> </el-breadcrumb-item>
                    <el-breadcrumb-item>项目编辑</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!--  添加 -->
        <div class = "ms-updmain">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="info">
                    <div class="fl upd-model" prop="userName">
                        <el-form-item label="项目名称" prop="proName">
                            <el-input type="text" v-model="ruleForm.proName" placeholder="请填写项目名称" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="负责人员" >
                            <el-input type="text" v-model="ruleForm.proPrincipal" placeholder="请填写负责人员" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="归属地点" prop="proAttribution">
                            <el-input type="text" v-model="ruleForm.proAttribution" placeholder="请填写归属地点" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="fr upd-model">
                        <el-form-item label="开始时间">
                            <el-date-picker v-model="ruleForm.proStarttime" align="right" type="date"  placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" >
                            <el-date-picker v-model="ruleForm.proEndtime" align="right" type="date"  placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="项目描述" prop="proDescription">
                    <el-input type="textarea" v-model="ruleForm.proDescription" placeholder="请填写项目描述" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            var checkProName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入项目名称'));
                }else{
                    callback();
                }
            };
            var checkProDescription = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入项目描述'));
                }else{
                    callback();
                }
            };
            var checkProAttribution = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入项目归属地点'));
                }else{
                    callback();
                }
            };

            return {
                ruleForm: {
                    proName:'',         // 项目名称
                    proDescription:'',  // 项目描述
                    proAttribution: '', // 归属地
                    proPrincipal:'',    // 负责人员
                    proStarttime:'',    // 开始时间
                    proEndtime:'',      // 结束时间
                },
                // 验证
                rules: {
                    proName: [
                        { validator: checkProName, trigger: 'blur' }
                    ],
                    proDescription: [
                        { validator: checkProDescription, trigger: 'blur' }
                    ],
                    proAttribution: [
                        { validator: checkProAttribution, trigger: 'blur' }
                    ],
                },
                loading:false,
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.altopen('编辑成功！','success');
                        this.loading = true;
                    } else {
                        this.altopen('请把信息填写完整！','warning');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getDataList(){
                var data =  {
                        proName:'A项目',         // 项目名称
                        proDescription:'项目描述项目描述',  // 项目描述
                        proAttribution: '北京', // 归属地
                        proPrincipal:'张三',    // 负责人员
                        proStarttime:'2017.01.01',    // 开始时间
                        proEndtime:'2017.01.02',      // 结束时间
                };
                this.ruleForm = data;
                this.loading = false;
            },
            // 公共弹框
            altopen(msg,type) {
                this.$notify({
                    type:type,
                    message: msg,
                    offset: 100,
                });
            },
        },
        mounted(){
            var that = this;
            that.loading = true;
            var t = new Date;
            that.ruleForm.proStarttime =  new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes());
            that.ruleForm.proEndtime =  new Date(t.getFullYear(), t.getMonth(), t.getDate(), t.getHours(), t.getMinutes());
            that.getDataList();
        }
    }
</script>
<style>
    .img-upd-div{height: 134px; width: 225px; float:left; overflow: hidden;border: #ccc 1px solid;margin-bottom: 5px; margin-right: 5px; position: relative}
    .img-upd-div .el-form-item__error{ position: absolute; bottom: 0px;  text-align: center; left: 0px; width: 100%;}
    .image-list2 .img-uplod{
        position: absolute;
        z-index: 999;
        background: transparent;
        top: -24px;
        width: 100%;
        height: 160px !important;
        color: #fff;
    }

</style>
